import React, { useState } from 'react';

import { demoUtil } from '../../utils';

import {
  ResourceManager,
  columnFieldsMap,
  formFieldsMap,
  ResourceManagerProps,
} from 'easyComponent';

import { commonData } from './commonData';

export default () => {
  const [sorterInfo, setSorterInfo] = useState({
    field: 'name',
    order: 'descend',
  });
  const [filterValue, setFilterValue] = useState({
    name: ['小明'],
    id: ['100'],
  });
  const config: ResourceManagerProps = {
    componentsMap: { ...columnFieldsMap, ...formFieldsMap },
    rowKey: 'id',
    title: '用户管理',
    features: {},
    fields: [
      {
        label: '姓名',
        name: 'name',
        componentName: 'TextColumnField',
        sorter: true,
        sortOrder: sorterInfo.field === 'name' && sorterInfo.order,
        filterdValue: filterValue.name,
        filters: [
          { label: '小明', value: '小明' },
          { label: '小王', value: '小王' },
        ],
      },
      {
        label: '工号',
        name: 'id',
        componentName: 'TextColumnField',
        sorter: true,
        sortOrder: sorterInfo.field === 'id' && sorterInfo.order,
        filterdValue: filterValue.id,
        filters: [
          { label: '100', value: '100' },
          { label: '200', value: '200' },
        ],
      },
      {
        label: '操作',
        name: 'name',
        componentName: 'OperationColumnField',
        actions: [
          {
            label: '编辑',
            handler: () => {
              demoUtil.toastInfo('你点击了编辑');
            },
          },
        ],
      },
    ],
  };

  return (
    <div>
      <ResourceManager
        {...config}
        dataSource={commonData.simpleDataSource}
        onChange={(event, args) => {
          setSorterInfo(args.sorter as any);
          setFilterValue(args.filters as any);
          console.log(event, args);
        }}
      />
    </div>
  );
};
